[자바스크립트] 원하는 파일명으로 다운로드 받는 방법

웹페이지에서 문서나 이미지 등을 다운 받는 기능을 구현하려고 합니다. 이 경우 만약 파일이름과 다른 특정 이름으로 다운로드 받게 하려면 어떻게 하면 될까요?

# 원하는 파일명으로 다운로드 받기

다운로드 기능을 구현할 경우 일반적으로 a 태그를 임의로 만들고 이 태그의 클릭 메소드를 실행시키는 방법이 많이 사용됩니다. 이때 a 태그를 생성하고 download 어트리뷰트를 추가 후 값을 설정하면 해당 파일의 이름으로 다운받게 됩니다.

만약 자바스크립트에서 클릭시 동작하는 예제를 만들어보면 다음과 같이 작성할 수 있습니다.

위와 같이 download 속성을 추가 후 원하는 파일이름을 값으로 추가하면 됩니다. 이처럼 간단하게 구현이 가능하죠.

! 팁 및 정보

이처럼 download 어트리뷰트는 파일이름을 정할 수 있는데요~ 추가로 pdf나 이미지 등을 다운로드 할 경우 download 어트리뷰트를 사용하기도 합니다. 그 이유는 이런 파일은 다운로드되지 않고 브라우저에서 바로 열리기 때문이죠. 하지만 이 download 어트리뷰트를 사용하면 웹브라우저에서 바로 다운로드 받을 수 있습니다. 즉 브라우저에서 로드하지 않고 바로 다운로드를 받기 위해서도 역시 download 어트리뷰트를 추가하여 설정하면 됩니다. 

"브라우저 로드가 아닌 다운로드 할 때도 사용!"

여기까지 웹페이지에서 자바스크립트를 사용하여 원하는 파일을 가운 받는 방법에 대하여 간단하게 알아보았습니다.